import axios from 'axios'
import PubSub from 'pubsub-js'
import React, { Component } from 'react'

export default class Search extends Component {

  search = ()=> {
    
    // 获取用户的输入
    const {value} = this.keyWordElement

    // 发送请求前通知List更新状态
    // this.props.updataAppState({isFirst: false, isLoading: true})
    PubSub.publish('atguigu',{isFirst: false, isLoading: true})

    // 发送网络请求
    axios.get(`http://localhost:3000/api1/search/users?q=${value}`).then(
      response => {
        // 请求成功后通知List更新状态
        PubSub.publish('atguigu', {isFirst: false, isLoading: false, users: response.data.items})
      },
      error => {
        // 请求失败后通知List更新状态
        PubSub.publish('atguigu', {isLoading: false, err: error})
      }
    )

  }


  render() {
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">Search Github Users</h3>
        <div>
          <input ref={c=> {this.keyWordElement = c}} type="text" placeholder="enter the name you search"/>&nbsp;
          <button onClick = {this.search}>Search</button>
        </div>
      </section>
    )
  }
}
